<template>
    <div class="main">
        <main-header></main-header>
        <main-search></main-search>
        <main-menu></main-menu>
        <div class="main-container">
            <main-navigation></main-navigation>
            <router-view/>
        </div>
        <main-footer></main-footer>
    </div>
</template>

<script>
    import MainHeader from '@/pages/components/MainHeader.vue'
    import MainMenu from '@/pages/components/MainMenu.vue'
    import MainSearch from '@/pages/components/MainSearch.vue'
    import MainNavigation from '@/pages/components/MainNavigation.vue'
    import MainFooter from '@/pages/components/MainFooter.vue'

    export default {
        name: "Main",
        components: {
            MainHeader,
            MainMenu,
            MainSearch,
            MainNavigation,
            MainFooter
        }
    }
</script>

<style scoped lang="less">
    .main {
        background: @bac-color;
    }
    .main-container {
        background: @bac-color;
    }
</style>
